<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>一客一码</title>
    <link rel="stylesheet" href="/static/wework/h5/css/public.css">
	<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
	<style type="text/css">
		body{
			background: #f8f8f8;
			position: relative;
		}
		.aQrcode_header_contaienr{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 12px 22px 0px 22px;
		}
		.aQrcode_header_contaienr h2{
			font-size: 17px;
			color: #333;
			font-weight: bold;
		}
		.aQrcode_headerRefresh_contaienr{
			display: flex;
			align-items: center;
		}
		.aQrcode_headerRefresh_contaienr svg{
			width: 20px;
			height: 20px;
			fill: #438ef7;
		}
		.aQrcode_headerRefresh_contaienr span{
			font-size: 13px;
			color: #438ef7;
		}
		.aQrcode_main_contaienr{
			margin: 12px 22px;
			padding: 25px;
			background: #fff;
		}
		.aQrcode_mainInfo_contaienr{
			display: flex;
		}
		.aQrcode_mainInfo_contaienr img{
			width: 68px;
			height: 68px;
			display: block;
			border-radius: 3px;

		}
		.aQrcode_mainInfo_content{
			margin-left: 12px;
		}
		.aQrcode_mainInfo_content h2{
			font-size: 17px;
			color: #333;
			font-weight: bold;
		}
		.aQrcode_mainInfo_content p{
			font-size: 15px;
			color: #5b5b5b;
			margin-top: 5px;
		}
		.aQrcode_mainQRcode_contaienr{

		}
		.aQrcode_mainQRcode_contaienr img{
			width: 211px;
			height: 211px;
			display: block;
			margin: 12px auto;

		}
		.aQrcode_mainQRcode_contaienr p{
			text-align: center;
			color: #9a9a9a;
			font-size: 12px;
		}
		.aQrcode_button_contaienr{
			display: flex;
			justify-content: center;
			/*margin: 22px;*/
		}
		.aQrcode_button_contaienr span{
			margin: 10px 25px;
			font-size: 14px;
			border: 1px solid #f8f8f8;
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 40px;
			border-radius: 5px;
			cursor: pointer;
		}
		.aQrcode_button_contaienr span:first-child{
			color: #fff;
			background: #438ef7;
		}
		.aQrcode_button_contaienr span:last-child{
			color: #303030;
			border: 1px solid #d5d5d5;
			background: #ffffff;
		}
		.aQrcode_hidden_contaienr{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,0.4);
		}
		.aQrcode_hiddenw_content{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
		.aQrcode_hidden_content svg{
			position: absolute;
			right: 10px;
			top: 10px;
			width: 17px;
			height: 17px;
			
		}
		.aQrcode_hidden_content{
			padding: 15px 20px;
			background: #fff;
			margin: 0 15px;
			height: 380px;
			width: 100%;
			position: relative;
			border-radius: 5px;
		}
		.aQrcode_hidden_content h3{
			font-size: 14px;
			color: #000;
			text-align: center;
			margin-bottom: 10px;
		}
		.aQrcode_hidden_content h4{
			font-size: 15px;
			color: #000;
			margin-bottom: 10px;
		}
		.aQrcode_hidden_list{
			margin-top: 10px;
			height: 310px;
			overflow-x: hidden;
			overflow-y: auto;
		}
		.aQrcode_hidden_list li{
			display: flex;
			margin-bottom: 7px;
		}
		.aQrcode_hidden_list li img{
			width: 50px;
			height: 50px;
			margin-right: 15px;
		}
		.aQrcode_hidden_listInfo{
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.aQrcode_hidden_listInfo h5{
			font-size: 14px;
			color: #333;
			margin-bottom: 7px;
		}
		.aQrcode_hidden_listInfo p{
			font-size: 12px;
			color: #999;
		}
		/*版权信息*/
		.public_copyright_container{
			
		}
		.public_copyright_content{
			position: relative;
			margin: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: url(http://weidogstest.oss-cn-beijing.aliyuncs.com/0d118b616ad13e1f874e458c8310be76.png)no-repeat center center;
		}
		.public_copyright_content p{
			background: #f8f8f8;
			font-size: 13px;
			color: #999;
			line-height: 17px;
			text-align: center;
			padding: 0 5px;
		}
	</style>
</head>
<body>
	<div class="aQrcode_header_contaienr">
		<h2>专属名片</h2>
	</div>
	<div class="aQrcode_main_contaienr">
		<div class="aQrcode_mainInfo_contaienr">
			<img src="{$staff['avatar']}">
			<div class="aQrcode_mainInfo_content">
				<h2>{$staff['name']}</h2>
			</div>
		</div>
		<div class="aQrcode_mainQRcode_contaienr">
			<img src="{$qrcode['qr_code']}">
			<p>扫一扫上面二维码加我企业微信</p>
		</div>
	</div>
	<div class="aQrcode_button_contaienr">
		<span id="send" onclick="send({$qrcode['id']})">发送专属名片</span>
		<span id="invitation">邀请数据</span>
	</div>
	<!-- 浮动层 -->
	<div class="aQrcode_hidden_contaienr" style="display: none;">
		<div class="aQrcode_hiddenw_content">
			<div class="aQrcode_hidden_content">
				<svg t="1596793173155" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4268" width="200" height="200"><path d="M512 421.490332 149.590238 59.08057C125.311473 34.801805 84.445226 34.458094 59.45166 59.45166 34.283863 84.619457 34.292235 124.801903 59.08057 149.590238L421.490332 512 59.080706 874.409626C34.801623 898.688709 34.45832 939.555 59.45166 964.54834 84.619683 989.716363 124.801677 989.707991 149.590374 964.919294L512 602.509668 874.409762 964.91943C898.688527 989.198195 939.554774 989.541906 964.54834 964.54834 989.716137 939.380543 989.707765 899.198097 964.91943 874.409762L602.509668 512 964.919294 149.590374C989.198377 125.311291 989.54168 84.445 964.54834 59.45166 939.380317 34.283637 899.198323 34.292009 874.409626 59.080706L512 421.490332Z" p-id="4269"></path></svg>
				<h3>他邀请来的客户</h3>
				<h4>全部{$counts}人</h4>
				<ul class="aQrcode_hidden_list">
					{foreach $statistics as $value}
						<li>
							<img src="{$value['customer']['avatar']}">
							<div class="aQrcode_hidden_listInfo">
								<h5>{$value['customer']['name']}</h5>
								<p>{$value['ctime']}</p>
							</div>
						</li>
					{/foreach}
				</ul>
			</div>
		</div>
	</div>
	<script src="/static/wework/h5/layui/layui.js"></script>
	<script src="/static/wework/h5/js/ajax.js"></script>
	<script src="/static/wework/h5/js/jquery.js"></script>
	<script type="text/javascript">
		$('#invitation').click(function(e){
			$('.aQrcode_hidden_contaienr').show();
		});
		$('.aQrcode_hidden_content svg').click(function(e){
			$('.aQrcode_hidden_contaienr').hide();
		});
	</script>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script>
		wx.config({
			beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: "{$wxConfig['appId']}", // 必填，企业微信的corpID
			timestamp: "{$wxConfig['timestamp']}", // 必填，生成签名的时间戳
			nonceStr: "{$wxConfig['nonceStr']}", // 必填，生成签名的随机串
			signature: "{$wxConfig['signature']}",// 必填，签名，见 附录-JS-SDK使用权限签名算法
			jsApiList: ['sendChatMessage'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
		});
		wx.ready(function(){
			console.log('config success');
			wx.agentConfig({
				corpid: "{$corp_id}", // 必填，企业微信的corpid，必须与当前登录的企业一致
				agentid: "{$agent_id}", // 必填，企业微信的应用id （e.g. 1000247）
				timestamp: "{$agentConfig['timestamp']}", // 必填，生成签名的时间戳
				nonceStr: "{$agentConfig['nonceStr']}", // 必填，生成签名的随机串
				signature: "{$agentConfig['signature']}",// 必填，签名，见附录-JS-SDK使用权限签名算法
				jsApiList: ['selectExternalContact','sendChatMessage'], //必填
				success: function(res) {
					console.log('agentConfig success');
					wx.checkJsApi({
						jsApiList: ['sendChatMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) {
							
						}
					});
				},
				fail: function(res) {
					if(res.errMsg.indexOf('function not exist') > -1){
						console.log('版本过低请升级')
					}
				}
			});
		});
		wx.error(function(res){
			console.log('error'+res);
		});
		
		function send(id){
			myAjaxPost(false, true, "/wework/h5.CustomerQrcode/info.html", { id:id}, function (resp) {
				if (resp.status == 'success') {
					wx.invoke('sendChatMessage', {
						msgtype:"image", //消息类型，必填
						image: {
							mediaid:resp.data, 
						}
					}, function(res) {
						if (res.err_msg == 'sendChatMessage:ok') {
							//发送成功
						}
					})
				}
			});
		}
	</script>
</body>
</html>